<template>
  <div id="bar" :style="chart_style"></div>
</template>

<script>
  import {getHomeData} from '@/api/home.js'
  export default {
    name:"BarChart",
    props:['chart_style'],
    data(){
      return {
          option : {
              title: {
                 text:"抚恤对象类别人数",
                 subtext: '单位：人数',
                 left: 'center'
              },
              xAxis: {
                  type: 'category',
                  axisLabel: { interval: 0, rotate: 30 },
                  data: []
              },
              yAxis: {
                  type: 'value'
              },
              tooltip: {
                  trigger: 'item',
                  axisPointer: {
                    type: 'shadow'
                  }
              },
              series: [{
                  data: [],
                  type: 'bar'
              }]
          }
      }
    },
    mounted() {
        var chartDom = document.getElementById('bar');
        var myChart = echarts.init(chartDom);
        let that=this;
        getHomeData({type:'bar'}).then(function(response){
            if(response.data.code==1){
                that.option.series[0].data=response.data.bar_data;
                that.option.xAxis.data=response.data.x_coor;
                myChart.setOption(that.option);
            }
        })
    }
  }
</script>

<style>
</style>
